﻿@model VehicleManagement.Models.Track
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="../../Content/css/page_yk_index.css" rel="stylesheet" type="text/css" />
<div id="data">
</div>
@Html.Partial("_PartviewDrivermanageNav")
<div class="content bc">
    <div class="content_link_warn f12">
        你当前的位置：实时监控&gt&gt &nbsp;&nbsp;路线查看
    </div>
    <div class="trackwrap">
        <div class="column">
            <h4 class="title f14">
                实时监控
            </h4>
        </div>
        <div class="detail_content">
            <div class="mapwrap">
                <div id="map" class="map"></div>
            </div>
            <div class="detail_info">
                <div class="headlabel">任务详情</div>            
                <div>
                    司机姓名:
                    @Html.DisplayFor(model => model.DriverName)
                </div>
                <div>
                    车牌号:
                    @Html.DisplayFor(model => model.CarNumber)
                </div>
                <div>
                    起始点:
                    @Html.DisplayFor(model => model.Beginning)
                </div>
                <div>
                    目的地:
                    @Html.DisplayFor(model => model.Destination)
                </div>
                <div>
                    已用时长:
                    @Html.DisplayFor(model => model.TimeCost)
                </div>
            </div>
        </div>
    </div>
    <div class="cb">
    </div>
</div>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
            function loadScript() {
                var script = document.createElement("script");
                script.src = "http://api.map.baidu.com/api?v=1.3&callback=initialize";
                document.body.appendChild(script);
            }


            function addPolyline(points, map) {
                var polyline = new BMap.Polyline(points, {
                    strokeColor: "blue",
                    strokeWeight: 6,
                    strokeOpacity: 0.5
                });
                map.addOverlay(polyline);
            }

            function initialize() {
                var map = new BMap.Map('map');
                var infoWindowOpts = {
                    width : 250,
                    height: 150,
                    title : "详细信息"
                };
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());
                var points = new Array();
                $.post("/Track/Points",{
                    id:@Model.TrackID
                },function (data) {
                    $.each(data, function () {
                        var pointDetail = "时间:" + Date(this.Time).toString() + '<br>'
                            + "经度:" + this.Longitude + '<br>'
                            + "纬度:" + this.Latitude + '<br>'
                            + "海拔:" + this.Altitude + '<br>'
                            + "速度：" + this.Speed + '<br>' 
                            + "其它信息:" + this.Information; 
                        points.push(new BMap.Point(this.Longitude,this.Latitude));
                        addMarker(map, new BMap.Point(this.Longitude,this.Latitude), 12,infoWindowOpts,pointDetail);
                    });
                    addPolyline(points, map);
                    if(points.length != 0){
                        map.centerAndZoom(points[0], 11);
                    }
                    else{
                        map.centerAndZoom(new BMap.Point(116.491, 39.233), 11);
                    }
                });
            }

            function addMarker(map, point, index,opts,pointDetail) {
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(22, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - index * 25)
                });
                var marker = new BMap.Marker(point, { icon: myIcon });
                map.addOverlay(marker);
                var infoWindow = new BMap.InfoWindow(pointDetail, opts);
                marker.addEventListener("click", function(){          
                    this.openInfoWindow(infoWindow);  
                });
            }
            window.onload = loadScript; 
</script>
